<!--
 * @FileName     :   菜单管理
-->
<template>
  <el-select v-model="value" placeholder="请选择图标" @canplay="_value">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <div class="options">
        <svg-icon style="float: left" :icon-class="item.label" />
        <span class="optionsLabel">{{ item.label }}</span>
        <div style="flex: 1"></div>

        <!-- <span
          style="
            float: right;
            color: var(--el-text-color-secondary);
            font-size: 13px;
          "
          >{{ item.value }}</span
        > -->
      </div>
    </el-option>
  </el-select>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  getCurrentInstance,
  toRef,
  onMounted,
} from 'vue';

const value = ref('');
const cities = ref([]);

const props = defineProps({
  value: {
    type: String,
    default: () => '',
  },
});
const emits = defineEmits(['update:value']);

onMounted(() => {
  getAllOptions();
});
const _value = (e) => {
  emits('update:value', e ?? '');
};
const getAllOptions = () => {
  let modules = {};
  const files = import.meta.globEager('@/icons/svg/*.svg');

  for (const key in files) {
    let filename = key.match(/(?<=icons\/svg\/).+(?=\.svg)/)[0];
    // filename = filename.replace(/\.svg/g, '');
    // console.log('filename', filename, key);
    modules[filename] = {
      label: filename,
      value: filename,
      icon: filename,
    };
  }
  cities.value = modules;
  // console.log(123, modules);
  // 然后把对应的文件名和路径拼接起来：

  // currentImageUrl = require("…/assets/images" + imagesNameArr[i]);
};
// 导出，使父组件可调用子组件的方法或者值
defineExpose({});
</script>
<style lang="scss" scoped>
.options {
  display: flex;
  justify-content: center;
  align-items: center;
  .optionsLabel {
    margin-left: 10px;
  }
}
</style>
